<template>
  <div class="container setting">
    <UserSidebar style="margin-top: 2.5rem" />
    <div class="setting-frame">
      <div class="title-frame" v-if="isMobile">
        <p style="margin-left: 0.3rem">My Settings</p>
        <div class="title-panel">
          <div
            class="nav-frame ac-bg"
            v-for="(item, index) in navList"
            :key="index"
            @click="clickNav(index)"
          >
            <div class="nav-panel">
              <div class="nav-fast">
                <img
                  class="icon"
                  :style="index != 0 ? 'width:1.1rem' : ''"
                  :src="item.icon"
                />
              </div>
            </div>
            <div class="nav-label">
              <p class="label">{{ item.name }}</p>
              <div class="icon-frame" v-if="navIndex == index"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="setting-panel login">
        <div class="page-title">
          <p class="title">My Settings</p>
        </div>
        <p class="setting-panel-p">My email address: {{ userInfo.email }}</p>
        <div class="login-frame">
          <div class="login-panel">
            <div class="input-frame">
              <div class="input-panel">
                <p class="input-label">Nick name:<span class="must">*</span></p>
                <input v-model="form.nick_name" class="input-in" />
              </div>
              <div class="input-panel">
                <p class="input-label">Job title:</p>
                <input v-model="form.job_title" class="input-in" />
              </div>
              <div class="input-panel">
                <p class="input-label">About</p>
                <textarea
                  class="Area"
                  v-model="form.description"
                  placeholder="Loren Baker is the Founder of SEJ, an Advisor at Alpha Brand Media and runs Foundation Digital, a digital marketing strategy & development agency."
                >
                </textarea>
              </div>
            </div>
            <div class="btn-frame" @click="clickLogin">
              <span>SAVE</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import setting from "./setting.js";
export default {
  mixins: [setting.mixin],
};
</script>
<style lang="less" scoped>
.Area {
  width: 100%;
  min-height: 8rem;
  clear: both;
  border: 1px solid #eee;
  padding: 10px;
}
.setting-panel-p {
  width: 100%;
  text-align: center !important;
  font-size: 0.8rem !important;
  font-weight: bold;
}
@import "../../login/login.less";
@import "../address/address.less";
@import "./setting.less";
</style>